<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
</head>
<body>
<div id="app">
    <h2>Text</h2>
    <input type="text" v-model="message">
    <p>{{message}}</p>
    <p v-once >{{message}}</p>
    <p v-html="message"></p>

    <h2>数据绑定</h2>
    <div id="dynamicId">11</div>
    <div v-bind:id="dynamicId">22</div>
    <div :id="dynamicId">33</div>
    <button v-bind:disabled="isButtonDisabled">Button</button>

    <h2>js表达式</h2>
    {{ number + 1 }}
    <hr>
    {{ ok ? 'YES' : 'NO' }}
    <hr>
    {{ info.split(' ').reverse().join('，').toUpperCase() }}
    <hr>

    <h2>参数</h2>
    <a v-bind:href="url">百度一下2</a><br>
    <button v-on:click="doSomething">点我一下</button>
    <button @click="doSomething2">按钮2</button>
</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!-- 生产环境版本，优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            // message:'vue.js大爷你好！'
            message:'<font color="red">呵呵</font>',
            dynamicId:3,
            isButtonDisabled:true,
            number:20,
            ok:true,
            info:'a b c',
            url:'https://www.baidu.com'
        },
        methods:{
            doSomething(){
                alert('点我干嘛');
            },
            doSomething2(){
                alert("有点我")
            }

        }
    })
</script>
</body>
</html>